<!-- 启动界面 -->
<template>
  <a-collapse class="collapse" :active-key="activeKey" @change="changeCollapse">
    <a-collapse-item :key="1" class="item">
      <template #header>
        <div class="text">拼多多</div>
      </template>
      <template #extra>
        <a-button type="text" class="btn" size="mini" @click="start" v-if="!isStart">启动</a-button>
        <div v-else class="started">已启动</div>
      </template>
      <a-list v-if="list.length > 0">
        <a-list-item v-for="(item, index) in list" :key="index" class="listItem">
          <div>{{ item.username }}</div>
          <div>{{ item.mall_name }}</div>
        </a-list-item>
      </a-list>
      <a-result status="warning" title="" v-else class="result">
        <template #icon>
          <icon-face-frown-fill class="icon" />
        </template>
        <template #subtitle>
          <div class="subtitle">暂无账号, 请先启动</div>
        </template>
      </a-result>
    </a-collapse-item>
  </a-collapse>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'

const isStart = ref<boolean>(false)
const list = reactive<any[]>([])
const activeKey = reactive<number[]>([])
watch(
  () => list.length,
  (newVal) => {
    isStart.value = newVal > 0 ? true : false
    if (newVal > 0) {
      activeKey.push(1)
    } else {
      activeKey.length = 0
    }
  }
)

const start = () => {
  window.electron.ipcRenderer.send('start')
}

const changeCollapse = (arr: number[]) => {
  if (arr.length > 0) {
    activeKey.push(1)
  } else {
    activeKey.length = 0
  }
}

onMounted(() => {
  window.electron.ipcRenderer.on('login-shop', (_, data: any) => {
    console.log(data)
    list.push(data)
  })
  window.electron.ipcRenderer.on('loginOut-shop', (_, data: any) => {
    const index = list.findIndex(
      (item) => item.mall_name === data.mall_name && item.username === data.username
    )
    list.splice(index, 1)
  })
})
</script>
<style lang="scss" scoped>
.collapse {
  .item {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .started {
      color: #52c41a;
      background-color: #f6ffed;
      border: 1px solid #b7eb8f;
      padding: 0 8px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 20px;
      display: inline-block;
    }

    .listItem {
      background: #fff;
      border: 1px solid #e5e6eb;
      border-radius: 6px;
      margin-bottom: 8px;
      padding: 8px 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

      .username {
        font-weight: 600;
        color: #1d2129;
        font-size: 14px;
      }

      .shop-name {
        font-size: 12px;
        color: #86909c;
      }
    }

    :deep(.arco-list-bordered) {
      border: none;
    }

    :deep(.arco-collapse-item-content) {
      padding: 0 12px;
    }

    .result {
      .icon {
        font-size: 40px;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        line-height: 60px;
      }

      .subtitle {
        color: #86909c;
        font-size: 14px;
        margin-top: 8px;
      }

      :deep(.arco-result-icon-warning .arco-result-icon-tip) {
        color: #d9d9d9;
        background-color: transparent;
      }
    }
  }
}
</style>
